<template>
	<view class="browse-record">
		<z-paging ref="paging" v-model="recordList" @query="getCollectList">
			<view slot="top">
				<view class="tablist">
					<view class="tabItem" v-for="(item, index) in tabList" :key="index" @click="onTabChange(index)">
						<p :class="currentIndex === index ? 'active' : ''">{{ item }}</p>
						<span v-if="currentIndex === index"></span>
					</view>
				</view>
				<u-search shape="round" margin="10px 20px" bgColor="#fff" :showAction="false" placeholder="请输入关键词"
					v-model="keyword" @search="refreshList" v-if="currentIndex ==0">
				</u-search>
			</view>
			<view class="roomList" v-if="currentIndex ==0">
				<view class="roomItem" v-for="(item, index) in recordList" :key="index" @click="toRoomDetail(item)">
					<image class="roompic" :src="item.images[0] ? item.images[0] :''" mode=""></image>
					<view class="roomtext">
						<p class="rtitle">{{item.name}}</p>
						<span class="rdesc">{{item.floor}}楼 | {{item.area}}㎡ |
							{{item.house_type === 1 ? '单间' : '一房一厅' }}</span>
						<view class="taglist">
							<span v-for="(tag, tindex) in item.taglist" :key="tindex"
								:class="tindex === 0 ? 'first' : ''">{{tag}}</span>
						</view>
						<view class="price">
							<p>¥ <span>{{item.rent}}</span>/月</p>
						</view>
					</view>
				</view>
			</view>

			<view class="releaselist" v-if="currentIndex ==1">
				<view class="releaseItem" v-for="(item, index) in recordList" :key="index">
					<view class="releaseitemtop">
						<view class="user">
							<view class="userleft">
								<image :src="item.avatar" mode="widthFix"></image>
								<view class="message">
									<p>{{ item.nickname }}</p>
								</view>
							</view>
							<p class="zhuanzu">{{ item.send_type_text || "" }}</p>
						</view>
						<view class="roominfo" v-if="item.send_type ===1">
							<p>房子租金：<span>{{ item.money || "0" }}元/月</span></p>
							<p>转租户型：<span>{{ item.house_type_text || "" }}</span></p>
							<p>合同方式：<span>{{ item.contract_type_text || "" }}</span></p>
						</view>
						<view class="roominfo" v-else>
							<p>{{ item.desc || "" }}</p>
						</view>
					</view>
					<view class="releaseitembottom">
						<view class="imagelist">
							<image @click.stop="ViewImage(index, item.photos_path)"
								v-for="(img, imgIndex) in item.photos_path" :key="imgIndex" :src="img"
								v-if="isImage2(img)" mode="aspectFill" class="notice-img">
							</image>
							<video v-for="(img, index) in item.photos_path" :src="img" v-if="isImage(img)" controls
								style="width: 100%; height: 166rpx"></video>
						</view>
						<view class="address">
							<image src="/static/mine/dingwei.png" mode="widthFix"></image>
							<p>{{ item.address }}</p>
						</view>
						<view class="desc">
							<span>
								{{ item.click }}浏览，{{ item.fen_num }}分享，{{item.updatetime }}
							</span>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		getCollectList,
		getPublishCollectList
	} from '@/api/mine.js'
	export default {
		data() {
			return {
				keyword: '',
				recordList: [],
				currentIndex: 0,
				tabList: ['房源收藏', '帖子收藏']
			}
		},
		methods: {
			isImage(url) {
				return /\.(mp4)$/i.test(url);
			},
			isImage2(url) {
				return /\.(jpg|jpeg|png|gif)$/i.test(url);
			},
			ViewImage(index, arr) {
				let filteredPaths = arr.filter((path) => !path.endsWith(".mp4"));
				uni.previewImage({
					current: filteredPaths[index], //当前点击的图片链接
					urls: filteredPaths, //数组
				});
			},
			onTabChange(index) {
				this.keyword = null
				this.currentIndex = index
				this.refreshList()
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.reload();
				}
			},
			async getCollectList(pageNo, pageSize) {
				let res = null
				if (this.currentIndex === 0) {
					res = await getCollectList({
						limit: pageSize,
						page: pageNo,
						keyword: this.keyword
					});
				} else {
					res = await getPublishCollectList({
						limit: pageSize,
						page: pageNo,
						keyword: this.keyword
					});
				}
				if (res.response.statusCode === 200) {
					this.$refs.paging.complete(res.data.data.data);
				}
			},
			toRoomDetail(item) {
				uni.navigateTo({
					url: '/pages-house/house-detail/house-detail?id=' + item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tablist {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		padding: 0 36px;
		background: #f5f6fa;

		.tabItem {
			height: 35px;
			margin-top: 10rpx;

			p {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 13px;
				color: #606060;
			}

			.active {
				font-size: 15px;
				color: #333333;
				font-weight: bold;
			}

			span {
				width: 16px;
				height: 3px;
				background: linear-gradient(#0079ff 0%, #1ca9fe 100%);
				box-shadow: 0px 2px 4px 0px rgba(0, 149, 248, 0.3);
				border-radius: 2px;
				display: block;
				margin: 6px auto;
			}
		}
	}

	.custom-nav-bar {
		height: 50px;
		/* 导航栏高度 */
		display: flex;
		align-items: center;
		color: #000;
		padding: 30px 16px 16px 16px;
	}

	.nav-back {
		flex: 0 0 auto;
		cursor: pointer;

		image {
			width: 12px;
			height: 24px;
			// padding-left: 16px;
		}
	}

	.nav-title {
		flex: 1 1 auto;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 17px;
		color: #000000;
	}

	.roomItem {
		width: 88%;
		padding: 10px;
		background: #fff;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.01);
		border-radius: 12px;
		display: flex;
		margin: 15px auto;

		.roompic {
			width: 110px;
			height: 110px;
			margin-right: 8px;
		}

		.roomtext {
			width: 64%;

			.rtitle {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 13px;
				color: #222222;
				font-weight: bold;
			}

			.rdesc {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 10px;
				color: #999999;
				line-height: 30px;
			}

			.taglist {
				display: flex;
				align-items: center;

				span {
					height: 13px;
					padding: 5px;
					background: #F2F5FB;
					border-radius: 2px;
					display: block;
					font-weight: 400;
					font-size: 10px;
					color: #4F5963;
					margin-right: 10px;
				}

				.first {
					background: #FAF1F2;
					font-weight: 400;
					font-size: 10px;
					color: #FE0404;
				}
			}

			.price {
				margin-top: 20px;

				p {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 10px;
					color: #FE0404;

					span {
						font-size: 14px;
						font-weight: bold;
					}
				}
			}
		}
	}

	.releaselist {
		width: 100%;
		// height: 100vh;
		// margin-top: 77rpx;
	}

	.releaseItem {
		width: 88%;
		padding: 12px;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.01);
		border-radius: 12px;
		background: #ffffff;
		margin: 20px auto;

		.releaseitemtop {
			margin-bottom: 20rpx;
			margin-top: 20rpx;

			.user {
				display: flex;
				justify-content: space-between;

				.userleft {
					display: flex;

					image {
						width: 58px;
						height: 58px;
						margin-right: 10px;
						border-radius: 8px;
					}

					.message {
						p {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 16px;
							color: #222222;
							line-height: 30px;
						}

						span {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 12px;
							color: #999999;
							display: block;
						}
					}
				}

				.zhuanzu {
					width: 54px;
					height: 20px;
					background: rgba(0, 149, 248, 0.08);
					border-radius: 3px;
					border: 1px solid #0095f8;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 11px;
					color: #0095f8;
					text-align: center;
					line-height: 20px;
				}
			}

			.roominfo {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 15px;
				color: #4f5963;
				line-height: 26px;

				span {
					color: #000;
				}
			}
		}

		.releaseitemcenter {
			width: 100%;
			height: 52px;
			background: #e3f5ff;
			border-radius: 8px;
			margin: 12px auto;
			display: flex;
			align-items: center;

			image {
				width: 16px;
				height: 16px;
				margin-right: 10px;
				margin-left: 38%;
			}

			p {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #0095f8;
			}
		}

		.releaseitembottom {
			.imagelist {

				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 8rpx;
				margin-bottom: 24rpx;

				.notice-img {
					width: 100%;
					height: 160rpx;
					border-radius: 8rpx;
				}
			}

			.address {
				display: flex;
				align-items: center;
				padding: 10px 0;

				image {
					width: 16px;
					height: 15px;
					margin-right: 10px;
				}

				p {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 13px;
					color: #333333;
				}
			}

			.desc {
				display: flex;
				justify-content: space-between;
				align-items: center;

				span {
					display: block;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 12px;
					color: #999999;
				}

				image {
					width: 20px;
					height: 18px;
				}
			}
		}

		.button-group {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 20rpx;

			.button {
				width: 80px;
				height: 32px;
				background: #ff4d4f;
				border-radius: 16px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #ffffff;
				text-align: center;
				line-height: 32px;
			}
		}
	}
</style>